<template>

    <div id="stop_area">
        <el-form :inline="true" size="medium">
            <el-form-item>
                <el-select v-model="params.storeId" placeholder="选择仓库" clearable @change="search">
                    <el-option :value="item.id" :label="item.name" v-for="(item, index) in goodsStoreList"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search">搜索</el-button>
                <el-button @click="dialogVisible = true">添加</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="list" v-loading="loading" stripe>
            <el-table-column label="id" prop="id" align="center"></el-table-column>
            <el-table-column label="所属仓库" prop="storeId" align="center">
                <template slot-scope="scope">
                    {{selectStore(scope.row.store_id)}}
                </template>
            </el-table-column>
            <el-table-column label="省" prop="province_name" align="center">
                <template slot-scope="scope">
                    {{scope.row.province_name || '--'}}
                </template>
            </el-table-column>
            <el-table-column label="市" prop="city_name" align="center">
                <template slot-scope="scope">
                    {{scope.row.city_name || '--'}}
                </template>
            </el-table-column>
            <el-table-column label="区\县" prop="exp_area_name" align="center">
                <template slot-scope="scope">
                    {{scope.row.exp_area_name || '--'}}
                </template>
            </el-table-column>

            <el-table-column label="区域类型" prop="area_type" align="center">
                <template slot-scope="scope">
                    {{scope.row.area_type == 1 ? '省':scope.row.area_type == 2? '市':'区' }}
                </template>
            </el-table-column>

            <el-table-column label="停发原因" prop="reason" align="center">
                <template slot-scope="scope">
                    {{scope.row.reason || '--'}}
                </template>
            </el-table-column>

            <el-table-column label="创建时间">
                <template slot-scope="scope">
                    {{$common.getDate(scope.row.create_time)}}
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="text" @click="setData(scope.row)">修改</el-button>
                    <el-button type="text" class="error" @click="del(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                class="page"
                background
                @size-change="handleSizeChange"
                @current-change="getList"
                :current-page.sync="params.pageNo"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <el-dialog
                :title="formData.id ? '修改': '添加'"
                :visible.sync="dialogVisible"
                width="530px"
                center
                :before-close="handleClose"
                :close-on-click-modal="false"
        >
            <el-form :model="formData" :rules="rules" ref="formData" label-width="110px">
                <el-form-item label="所属仓库" prop="storeId">
                    <el-select placeholder="选择仓库" v-model="formData.storeId" clearable style="width: 100%;">
                        <el-option :label="item.name" :value="item.id.toString()"
                                   v-for="(item, index) in goodsStoreList"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="停发区域" prop="areaType">
                    <el-select placeholder="选择区域类型" v-model="formData.areaType" clearable style="width: 100%;">
                        <el-option label="省" value="1"></el-option>
                        <el-option label="市" value="2"></el-option>
                        <el-option label="区" value="3"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="发货省(全称)" prop="provinceName">
                    <el-input v-model="formData.provinceName" placeholder="请输入省"></el-input>
                </el-form-item>
                <el-form-item label="发货市(全称)" prop="cityName" v-if="formData.areaType > 1">
                    <el-input v-model="formData.cityName" placeholder="请输入市"></el-input>
                </el-form-item>
                <el-form-item label="发货区/镇(全称)" prop="expAreaName" v-if="formData.areaType > 2">
                    <el-input v-model="formData.expAreaName" placeholder="请输入区"></el-input>
                </el-form-item>
                <el-form-item label="停发原因" prop="reason">
                    <el-input v-model="formData.reason" placeholder="请输入停发原因"></el-input>
                </el-form-item>
            </el-form>
            <div class="align-center">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="write" :loading="formLoading">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>


    export default {
        name: "StopArea",

        data() {
            return {
                params: {
                    storeId: '',
                    pageNo: 1,
                    pageSize: 10,
                    isCount: true,
                    startTime: '',
                    endTime: ''
                },
                total: 0,
                dialogVisible: false,
                loading: false,
                list: [],
                item: [],
                goodsStoreList: [],
                formLoading: false,
                formData: {
                    areaType: '',
                    storeId: '',
                    provinceName: '',
                    cityName: '',
                    expAreaName: '',
                    reason: ''
                },
                timeArr: [],
                rules: {
                    storeId: {
                        message: '请选择仓库', required: true, trigger: 'change'
                    },
                    areaType: {
                        message: '请选择区域类型', required: true, trigger: 'change'
                    },
                    provinceName: {
                        message: '请输入发货省', required: true, trigger: 'blur'
                    },
                    cityName: {
                        message: '请输入发货市', required: true, trigger: 'blur'
                    },
                    expAreaName: {
                        message: '请输入发货区/镇', required: true, trigger: 'blur'
                    }

                }
            }

        },

        watch() {
        },

        mounted() {
            this.getStore();
            this.getList();
        },


        methods: {
            timeChange(val) {
                if (val) {
                    this.params.startTime = this.$common.getDate(val[0]);
                    this.params.endTime = this.$common.getDate(val[1]);
                } else {
                    this.params.startTime = ''
                    this.params.endTime = ''
                }
                this.search()
            },
            handleSizeChange(value) {
                this.params.pageSize = value
                this.search()
            },
            getList() {
                this.loading = true
                this.$request.post({
                    params: this.params,
                    url: '/ReportApi/admin/stoparealistt',
                    success: result => {
                        this.list = result[0]
                        if (this.params.isCount) {
                            this.params.isCount = false
                            this.total = result[1]
                        }
                    },
                    finally: () => {
                        this.loading = false
                    }
                })
            },

            setData(data) {
                console.log(data)
                this.formData.storeId = data.store_id.toString();
                this.formData.storeName = data.name;
                this.formData.provinceName = data.province_name;
                this.formData.cityName = data.city_name;
                this.formData.expAreaName = data.exp_area_name;
                this.formData.areaType = data.area_type.toString();
                this.formData.reason = data.reason
                this.formData.id = data.id
                this.dialogVisible = true
            },

            del(id) {
                this.$confirm('确认删除?', '提示').then(() => {
                    this.$request.post({
                        url: '/ReportApi/admin/stopareadel',
                        params: {
                            id
                        },
                        success: () => {
                            this.$message.success('操作成功')
                            if (this.params.pageNo > 1 && this.list.length < 2) {
                                this.params.pageNo--
                            }
                            this.getList();
                        }
                    })
                })
            },
            write() {
                console.log(this.formData)
                if (this.formData.areaType == 1){
                    this.formData.cityName = ''
                    this.formData.expAreaName = ''
                }
                if (this.formData.areaType == 2){
                    this.formData.expAreaName = ''
                }
                this.$refs['formData'].validate((valid) => {
                    if (valid) {
                        if (this.formLoading) {
                            return;
                        }
                        this.formLoading = true
                        var url = '/ReportApi/admin/' + (this.formData.id ? 'stopareaupdate' : 'stopareaupadd')
                        this.$request.post({
                            url,
                            params: this.formData,
                            success: result => {
                                this.$message.success('操作成功')
                                this.dialogVisible = false
                                this.reset()
                                this.search()
                            },
                            finally: () => {
                                this.formLoading = false
                            }
                        })
                    }
                })
            },

            handleClose(done) {
                if (!this.formLoading) {
                    this.reset()
                    done();
                }
            },

            reset() {
                for (var key in this.formData) {
                    this.formData[key] = ''
                }
            },
            search() {
                this.params.pageNo = 1
                this.params.isCount = true
                this.getList();
            },
            getStore() {
                this.$request.post({
                    closeErrInfo: true,
                    closeCodeInfo: true,
                    url: '/ReportApi/admin/stopareaalllistt',
                    success: result => {
                        this.goodsStoreList = result
                    }
                })
            },

            selectStore(storeId) {
                if (!this.goodsStoreList.length) {
                    return;
                }
                var index = this.goodsStoreList.findIndex(item => item.id == storeId);
                if (index == -1) {
                    return ''
                }
                return this.goodsStoreList[index].name
            },
        }
    }
</script>

<style scoped>
    .page {
        text-align: right;
        margin-top: 20px;
    }
</style>